import { useLocation, useNavigate, useParams, useSearchParams} from "react-router-dom"

// 高阶组件: 函数
function withRouter(WrapperComponent) {
  return function(props) {
    // 1. 导航
    const navigate = useNavigate()

    // 2. 获取动态路由信息: /detail/:id
    const params = useParams()

    // 3. 获取搜索参数: /search?q=xxx
    const location = useLocation() // { pathname: '/search', search: '?q=xxx' }
    const [searchParams] = useSearchParams() // SearchParams { get: [Function: get], getAll: [Function: getAll], sort: [Function: sort], keys: [Function: keys], entries: [Function: entries], values: [Function: values] }
    const query = Object.fromEntries(searchParams) // { q: 'xxx' }

    // const routes = useRoutes // 类组件继承不行

    const router = {
      navigate,
      params,
      location,
      query,
    }

    return <WrapperComponent {...props} router={router} />
  }
}

export default withRouter